<template>
	<view style="background-color: #FFFFFF;position: relative;">
		<image :src="baseImageUrl + '/main/img_talent_bg.png'" class="top-bg-image"></image>
		<view style="display: flex;flex-direction: column;position: absolute;">
			<view @click="backClick()" class="top-title-view" :style="'height: '+navigationBarHeight+'px;margin-top:'+iStatusBarHeight+'px;'">
				<image class="back-img-view" src="../../static/selection/icon_back_white.png"></image>
			</view>
			<view class="title-text">达人榜单</view>
			<view class="date-text" @click="chooseDateClick('date')" v-if="currentTab==0">{{chooseDate}}</view>
			<view class="date-text" @click="chooseDateClick('month')" v-else>{{chooseMonth}}</view>
			<view class="tab-group-view">
				<image :src="currentTab==0?'../../static/main/img_talent_day.png':'../../static/main/img_talent_month.png'"></image>
				<view style="width: 100%;height: 100%;;display: flex;position: absolute;">
					<text @click="checkTab(0)"></text>
					<text @click="checkTab(1)"></text>
				</view>
			</view>
			<view class="list-group-view">
				<block v-if="statList.length > 0">
					<view v-for="(item, index) in statList" :key="index" :id="index">
						<view class="list-info">
							<view class="item-left-view">
								<image v-if="index==0" :src="baseImageUrl+'/main/icon_list_1.png'"></image>
								<image v-else-if="index==1" :src="baseImageUrl+'/main/icon_list_2.png'"></image>
								<image v-else-if="index==2" :src="baseImageUrl+'/main/icon_list_3.png'"></image>
								<text v-else>{{index}}</text>
							</view>
							<image :src="item.wxAvatar" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
							<view class="item-center-group">
								<text class="item-title">{{item.wxNickName}}</text>
								<text class="item-describe">类目：{{item.productTypeName}}</text>
							</view>
							<image :src="baseImageUrl+'/main/icon_address.png'" style="width: 48rpx;height: 48rpx;"></image>
							<text class="item-city">{{item.cityName}}</text>
						</view>
					</view>	
				</block>
				<block v-else>
					<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<image src="/static/mine/img_manage_empty.png" class="loginTopImg"></image>
						<text class="loginTopText">没有榜单信息</text>
					</view>
				</block>
				<view style="height: 40rpx;"></view>
			</view>
		</view>
		<w-picker
			mode="date"
			startYear="2010" 
			:current="true"
			:disabledAfter="true"
			fields="month"
			@confirm="onConfirm($event,'month')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="month"
		></w-picker>
		<w-picker
			mode="date"
			startYear="2010" 
			:current="true"
			:disabledAfter="true"
			fields="day"
			@confirm="onConfirm($event,'date')"
			@cancel="onCancel"
			:disabled-after="false"
			ref="date"
		></w-picker>
	</view>
</template>

<script>
	import moment from '../../common/moment.min.js';
	import configUrls from '../../common/config.js';
	import wPicker from "@/components/w-picker/w-picker.vue"
	export default {
		components:{
		    wPicker
		},
		data() {
			return {
				baseImageUrl: configUrls.baseImageUrl,
				iStatusBarHeight: 0,
				navigationBarHeight: 0,
				currentTab: 0,
				statList: [],
				chooseDate: "",
				chooseMonth: "",
			}
		},
		onReady() {
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			const customHeight = wx.getMenuButtonBoundingClientRect();
			this.navigationBarHeight = customHeight.height + (customHeight.top - this.iStatusBarHeight) * 2;
		},
		onLoad() {
			this.chooseDate = moment().format("YYYY-MM-DD");
			this.chooseMonth = moment().format("YYYY-MM");
			this.getDailystat();
		},
		methods: {
			onConfirm(res, type){
				console.log(res)
				if (type == "date") {
					this.chooseDate = res.value;
					this.statList = [];
					this.getDailystat();
				} else {
					this.chooseMonth = res.value;
					this.statList = [];
					this.getMonthstat();
				}
			},
			onCancel(){
				
			},
			chooseDateClick(type) {
				this.$refs[type].show();
			},
			getMonthstat() {
				var that = this;
				this.$Request.postJsonLoadView(configUrls.getMonthstat, {
					begin: that.chooseMonth + "-01 00:00:00"
				}).then(res => {
					if (res.code == "10000") {
						that.statList = res.data.result.kolOrderMonthStatList;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			getDailystat() {
				var that = this;
				this.$Request.postJsonLoadView(configUrls.getDailystat, {
					begin: that.chooseDate + " 00:00:00"
				}).then(res => {
					if (res.code == "10000") {
						that.statList = res.data.result.kolOrderMonthStatList;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}); 
			},
			checkTab(index) {
				this.currentTab = index;
				if (index == 0) {
					this.getDailystat();
				} else {
					this.getMonthstat();
				}
			},
			backClick() {
				uni.navigateBack({
					delta:1
				});
			}
		}
	}
</script>

<style>
	@import url("../../css/main/talentList.css");
</style>
